<template>
  <div class="top">
    <div class="container">
      <div class="loginList">
        <p>菩提优购欢迎您！</p>
        <p v-if="!userInfo.loginName">
          <span>请</span>
          <router-link to="/login" class="login">登录</router-link>
          <router-link to="/register" class="register">免费注册</router-link>
        </p>
        <p v-else>
          <span>普通用户 </span>
          <router-link to="/center" class="user_account">{{
            userInfo.loginName
          }}</router-link>
          <a class="log_out" @click.prevent="logOut">退出登录</a>
        </p>
      </div>
      <div class="typeList">
        <router-link to="/center">我的订单</router-link>
        <router-link to="/shopcart">我的购物车</router-link>
        <a href="###">我的账户</a>
        <a href="###">菩提会员</a>
        <a href="###">企业采购</a>
        <a href="###">关注菩提优购</a>
        <a href="###">合作招商</a>
        <a href="###">商家后台</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HeaderNav",
  computed: {
    ...mapState("login", ["userInfo"]),
  },
  methods: {
    //退出登录
    logOut() {
      //退出登录消息弹窗提示
      try {
        this.$confirm("确认要退出登录？", "提示", {
          confirmButtonText: "取消",
          cancelButtonText: "确定",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "info",
              message: "您已取消退出登录！",
              center: true,
            });
          })
          .catch(async () => {
            const res = await this.$store.dispatch("login/logOut");
            if (res) {
              this.$message({
                type: "success",
                message: "退出登录成功!",
                center: true,
              });
              this.$router.push("/home");
            }
          });
      } catch (error) {
        this.$message({
          message: error,
          type: "error",
          center: true,
        });
      }
    },
    //发请求获取用户数据
    async getUserInfo() {
      try {
        await this.$store.dispatch("login/getUserInfo");
      } catch (error) {
        console.log(error);
      }
    },
  },
  mounted() {
    // this.getUserInfo();
  },
};
</script>

<style scoped lang="less">
.top {
  background-color: #e2e2e2;
  height: 30px;
  line-height: 30px;

  .container {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .loginList {
      float: left;

      p {
        float: left;
        margin-right: 10px;
        .login,
        .user_account {
          font-weight: 800;
          font-size: 13px;
          cursor: pointer;
        }
        .register,
        .log_out {
          border-left: 3px solid #b3aeae;
          padding: 0 5px;
          margin-left: 5px;
          color: #3498db;
          font-weight: 600;
          cursor: pointer;
        }
      }
    }

    .typeList {
      float: right;

      a {
        padding: 0 10px;

        & + a {
          border-left: 1px solid #b3aeae;
        }
      }
    }
  }
}
</style>
